<template>
    <ul>
        <li v-for="c in datas" :key="c.id">
            <span class="cName flex justify-start align-center" :style="`font-weight:${c.class_level==0?'bold':''};`">
                <span v-if="c.class_level==0" style="padding-right: 2px;">--</span><span style="padding-right: 2px;" v-for="s in c.class_level" :key="s">---</span>{{ c.class_title }}
            </span>
            <Menuchild v-if="c.children" :datas="c.children"></Menuchild>
        </li>
    </ul>
</template>
<script>
export default{
    props:{
        datas:{
            type:Array,
            value:[]
        }
    }
}
</script>
<style lang="scss" scoped>
    ul{
        width:100%;
        li{
            width:100%;
            list-style: none;
            .cName{
                width:100%;
                display: inline-block;
                height: 30px;
                line-height: 30px;
                transition: .5s all ease;
                border-left: 1px dashed #ccc;
                span{
                    color:#ccc;
                }
                &:hover{
                    background:rgb(255, 255, 255);
                    cursor: pointer;
                    border-radius: 10px;
                    font-weight: bold;
                    box-shadow: 20px 20px 20px rgba(29, 36, 56, 0.05), -20px -20px 20px rgba(255, 255, 255, 0.5), 6px 6px 6px rgba(29, 36, 56, 0.05), -6px -6px 6px rgba(255, 255, 255, 0.5);
                }
                img{
                    width:10px;
                    height:auto;
                }
            }
        }
    }
</style>